<template>
  <div>
    <!-- 手机注册 -->
    <div class="row jcsb">
      <h1 class="">手机注册</h1>
      <div class="fz-0-6">
        点击 <router-link class="blue" :to="'/login'" target>登录</router-link>
      </div>
    </div>

    <el-form
      ref="registrationFormRef"
      :model="user"
      :rules="rules"
      class="w100"
      status-icon
      label-position="top"
    >
      <SmsvcodeForm
        v-model:mobilenumber="user.mobileNumber"
        v-model:smsvcode="user.smsvcode"
        @send="SendSmsVcode"
        ref="smsvcodeFormRef"
      ></SmsvcodeForm>

      <el-form-item prop="password" :label="$t('Password')">
        <el-input
          v-model="user.password"
          autocomplete="off"
          type="password"
          placeholder="请输入密码 "
          show-password
        />
      </el-form-item>

      <el-form-item class="mb-0" prop="againpass" label="确认密码">
        <el-input
          v-model="user.againpass"
          autocomplete="off"
          type="password"
          placeholder="请再次输入密码"
          show-password
          @keydown.enter="onRegistered"
        />
      </el-form-item>
      <el-form-item class="mb-0">
        <el-checkbox v-model="user.agree">
          <p class="fz-0-6" style="color: black">我已阅读并同意</p>
        </el-checkbox>
        <router-link
          style="vertical-align: top"
          class="fz-0-6 blue"
          :to="'privacy'"
          target="_blank"
        >
          &nbsp;隐私声明&nbsp;
        </router-link>
        <p class="fz-0-6" style="vertical-align: bottom">和</p>
        <router-link
          style="vertical-align: bottom"
          class="fz-0-6 blue"
          :to="'AgreementsRegistproto'"
          target="_blank"
        >
          &nbsp;用户注册协议 &nbsp;
        </router-link>
      </el-form-item>
      <el-form-item>
        <el-button
          class="w100"
          type="primary"
          @click="onRegistered"
          :disabled="!user.agree"
        >
          {{ '注册' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { shios } from '@/api/Shios';
import route from '@/route';
import { ElMessage, FormInstance } from 'element-plus';
import { ref } from 'vue';
import { store } from '@/store';

/**
 * 验证两次密码
 * @param rule
 * @param value
 * @param callback
 */
function validator(rule: any, value: any, callback: any) {
  if (value != user.value.password) {
    callback(new Error('两次密码不一致'));
  } else {
    callback();
  }
}
const rules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 5,
      message: '长度在 不小于 5 个字符',
      trigger: 'blur',
    },
  ],
  mobileNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      len: 11,
      message: '手机号长度错误',
      trigger: 'blur',
    },
  ],
  smsvcode: [{ required: true, message: '请输入短信验证码', trigger: 'blur' }],

  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      message: '长度在 不小于 6 个字符',
      trigger: 'blur',
    },
  ],
  againpass: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      min: 6,
      message: '长度在 不小于 6 个字符',
      trigger: 'blur',
    },
    { validator: validator, trigger: 'blur' },
  ],
};
const user = ref({
  name: '',
  password: '',
  againpass: '',
  code: '',
  smsvcode: '',
  mobileNumber: '',
  agree: false,
});
const registrationFormRef = ref<FormInstance>();
const smsvcodeFormRef = ref<FormInstance>();

/**
 * 发送注册短信验证码
 */
async function SendSmsVcode() {
  if (!smsvcodeFormRef.value) return;
  await smsvcodeFormRef.value.validateField('mobileNumber');
  var res = await shios.post<SendStatus>(
    '/Sms/SendRegistrationSMSVerificationCode',
    {
      search: { mobileNumber: user.value.mobileNumber },
    }
  );
  if (res.data?.code == 'Ok') {
    ElMessage.success('发送成功');
  } else {
    let message = res.data?.message;
    if (res.data?.message) {
      ElMessage.error(message);
    }
  }
}

/**
 * 注册
 */
async function onRegistered() {
  const data = user.value;

  if (!smsvcodeFormRef.value) return;
  await smsvcodeFormRef.value.validate();

  if (!registrationFormRef.value) return;
  await registrationFormRef.value.validate();

  const res = await shios.post<User>('Register/UseSmsvcode', {
    data,
  });
  if (res.ok) {
    // eslint-disable-next-line new-cap
    ElMessage({
      message: '用户注册成功',
      type: 'success',
    });
    store.user.update(res.data);
    route.push('/login');
  }
}
</script>

<style lang="scss" scoped></style>
